page-login {
    .container{
        width: 90%;
        max-width: 31rem;
       
    }
    .clear_img{
        position: absolute;
        top: 2rem;
        right: 2rem;
        z-index: 1;
        font-size: 2rem;
    }
    .header_img{
        margin: 7rem auto 2.9rem auto;
        @include border-radius(5rem);
        @include box-area(10rem,center);
        background: rgba(230,230,230,1);
        font-size: 2.4rem;
    }
    .hc_content{
        @extend .container;
        margin: 0 auto;
        overflow: hidden;
        @include border-radius(5px);
        box-shadow: 0 0 1rem #333;
        .login-item{
            padding: 0 1rem;
            background: #fff;
            .iconfont{
                z-index: 10;
            }
        }
        .login-btn{
            margin: 0;
            width: 100%;
            border-radius: 0;
            height: 4rem;
            background: #3A80F3;
        }
        
    }
    .cell{
        @include flex(space-between);
        @extend .container;
        margin: 1rem auto 3rem auto;
        color: $font-color;
    }
    .cutOff{
        @extend .container;
        text-align: center;
        margin: 0 auto;
        i{
            position: relative;
            display: block;
            top: 0.7rem;
            height: 1px;
            width: 100%;
            background: $font-color;
        }
        span{
            position: relative;
            display: inline-block;
            color: $font-color;
            width: 30%;
            min-width: 5rem;
            background: #f2f2f2;
        }
    }
    .login{
        @extend .container;
        @include flex(space-around);
        margin: 2rem auto 0 auto;
        span{
            @include box-area(3.4rem,center);
            background-color:#fff;
            @include border-radius(1.7rem);
            background-position:center;
            background-size: 2rem 2rem; 
            background-repeat: no-repeat;
        }
    }
}
